<template>
	<view class="index-content">
		<!-- 头部 -->
		<top-header></top-header
		<!-- 搜索框 -->
		<view class="search-box">
			<view class="content-box" @click="linkseach()">
				<icon class="icon-search" type="search" size="30rpx"></icon>
				<text class="price-text">请输入搜索关键字</text>
			</view>
		</view>
		<!-- 类型切换 -->
		<view class="type-ul-box">
			<view class="type-ul-list">
				<text class="item-cell " 
					v-for="(item,index) in typeList" 
					:key="index"
					:class="activeIndex === index ? 'active':''"
					@click="changeActive(index)"
				>{{item.name}}</text>
			</view>
		</view>
		<view class="bottom-content">
			<!-- 首页 -->
			<view v-if="activeIndex === 0">
				<view class="swiperlistbox">
					<uni-swiper-dot :info="swiperdata" :current="current" field="content">
						<swiper class="swiper-box" @change="change">
							<swiper-item v-for="(item ,index) in swiperdata" :key="index">
								<image class="image" :src="item.img_url" mode=""></image>
							</swiper-item>
						</swiper>
					</uni-swiper-dot>
				</view>
				<!-- 中间菜单 -->
				<center-list
					:activityarea="activityarea"
					:mainactiveList="mainactiveList"
				></center-list>
				<!-- 下部商品列表 -->
				<goods-list
					:dataList="dataList"
				>
				 <view class="top-title">
					<view class="left-title">
						<text class="iconfont iconzhuangshizhu"></text>
						会员专区
					</view>
					<view class="right-text" @click="tolinkList()">
						更多
						<text class="iconfont icongengduo"></text>
					</view>
				 </view>
				</goods-list>
			</view>
			<!-- 分类菜单 -->
			<goods-list 
				v-else
				:dataList="otherList"
			></goods-list>
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<van-toast id="van-toast" />
		<!-- #endif -->
	</view>
</template>
<script>
	import centerList from "./components/center_list.vue";
	import goodsList from "@/components/public/goods_list";
	import topHeader from "@/components/public/top_header.vue";	
	// #ifdef MP-WEIXIN
	import Toast from '@/wxcomponents/vant-weapp/toast/toast.js';
	// #endif
	import uniSwiperDot from "@/components/public/uni-swiper-dot.vue";
	import { getDatas , getproductData } from "@/api/getdata.js";
	export default {
		components:{
			"top-header":topHeader,
			"goods-list":goodsList,
			"center-list":centerList,
			"uni-swiper-dot":uniSwiperDot,
		},
		data() {
			return {
				current: 0,
				typeList:[],
				swiperdata:[],
				activityarea:[],
				mainactiveList:[],
				activeIndex:0,
				otherList:[],
				dataList:[],
				allData:[],
			}
		},
		onLoad() {
			this._initData();
			this.$setTopBar({
				title:"萌卡会员"
			});
		},
		methods: {
			async _initData(){
				try{
					let _channel = this.$store.getters.mychannel;
					uni.showLoading({title:"加载中"});
					const data = await getDatas({channel:_channel});
					const _allData = await getproductData({prod_name:"all",channel:_channel});
					this.typeList = data.navigation_bar;
					this.swiperdata = data.rotation_chart;
					this.activityarea = data.activity_area;
					this.mainactiveList = data.main_product;
					this.allData = _allData;
					this.dataList = _allData.slice(0,6);
					uni.hideLoading();
				}catch(e){
					uni.hideLoading();
					// #ifdef MP-WEIXIN
					Toast.fail(e.errMsg);
					// #endif
				}
			},
			change(e){
				this.current = e.detail.current;
			},
			changeActive(index){
				this.activeIndex = index;
				if(index !== 0){
					this.otherList = [];
					this.allData.map((item)=>{
					  if(item.category === index){
						this.otherList.push(item);
					  }
					})
				}
			},
			tolinkList(){
				this.$router({
					url:"../other/moregoods"
				})
			},
			linkseach(){
				this.$router({
					url:"../search/index",
				})
			}
		}
	}
</script>
<style lang="scss">
	@import "./style/home.scss";
</style>
